<html>
   <head>
      <script src="../../../Grid/GridE.js"> </script>
      <title>Complex flexible JavaScript tree grid component | TreeGrid</title>
      <meta name="description" content="Live sample shows TreeGrid features: tree, sort, group, filter, search, calculate, resize and move columns, drag, manipulate and select rows, cell types" />
   </head>
   <body class="Example" dir="rtl" id="ExampleBody">
      <style>
         /* Example shared styles */
         .Example h1,.Example h2,.Example ul,.Example .Desc,.Example .Path,.Example .Xml { max-height:999999px; }
         .Example h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
         .Example h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
         .Example h3,.Example h4 { display:inline-block; font:bold 15px/17px Arial; padding:0px 5px 0px 5px; border-radius:2px; margin:2px; color:#333; }
         .Example h3 { background:#EE9; border:1px solid #DD8; }
         .Example h4 { background:#BDE; border:1px solid #ACD; }
         .Example a { text-decoration:underline; }      
         .Example li { padding-bottom:8px; }
         .Example ul { margin:6px 0px 0px 0px; font:13px/16px Arial; }    
         .Example > ul { margin-left:0px; padding-left:15px; clear:both; }
         .Example ul b { color:#0585B9; }
         .Example .Desc { margin:0px 5px 10px 5px; padding:10px; border:1px solid #dfdfdf; font:14px/17px Arial; }
         .Example .Desc b { color:#0585B9; }
         .Example .Path { font:normal 12px Arial; color:#0585B9; }
         .Example .Path b { color:#D73938; }
         .Example .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
         .Example .Path i { color:black; font-style:normal; font-weight:bold; }
         .Example .Xml { margin-bottom:6px; font:11px/14px Arial; color:#757575; }
         .Example .Border { margin:0px 5px 15px 5px; }
         .Example .Main { }

         .Example .Highlight { color:#0585B9; padding-bottom:5px; }
      </style>
      <center class="Path" dir="ltr"><script>document.write(location.href.replace(/(.*)(\/Examples\/|\/ExamplesGantt\/)([^\/]+)\/([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/<i>$4</i>/$5").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
      <h1>Complex grid RTL</h1>
      <h2>A demonstration of many TreeGrid features in RTL mode - texts from right to left</h2>
      <div class="Desc">
         The example demonstrates three features related to RTL. They are controlled by the three top left (right) checkboxes.<br />
         <b>RTL mode</b> - texts from right to left. The browser page or its part is switched to RTL mode by dir='rtl' HTML attribute and TreeGrid shows in RTL.<br />
         <b>Hirji dates</b> - all dates in grid are shown in Persian Hirji calendar instead of Gregorian. Also all month and day names are translated to Persian.<br />
         <b>Arabic digits</b> - all digits in grid cells and dialogs are shown by Arabic digit characters instead of Latin<br />
      </div>
      <div class="Border">
         <div class="Main" style="max-width:1100px;height:700px;">
            <bdo Layout_Url="FirstRtlDef.xml" Data_Url="FirstRtlData.xml"></bdo>
         </div>
      </div>
            <script>

// -----------------------------------------------------------------------------------------
// Shows months May and June in the year 2019 only
Grids.OnUpdated = function(G){ G.FilterDateRange('D','1/1/2019~1/1/2020','Year',0); G.SetFilter('Month','{5:1,6:1}[(new Date(D)).getUTCMonth()+1]','D',0); }

// -----------------------------------------------------------------------------------------
// Used if Formula to count unique customers
function CountUnique(G,Rows,col){
for(var i=0,O={},cnt=0;i<Rows.length;i++) if(Get(Rows[i],"X")){
   var v = Get(Rows[i],col);
   if(!O[v]) { cnt++; O[v] = 1; }
   }
return cnt;
}
// -----------------------------------------------------------------------------------------
// Custom event for searching
// Searches in orders with specified items
Grids.OnRowSearch = function(G,row,col,found,F,type){
if(type || G.SearchDefs!="") return found; // Only for "in orders with items" and default call
if(row.Def.Name=="Data") return -1;        // Only for orders
for(var r=row.firstChild;r;r=r.nextSibling) { 
	var found = F(r,col,1);                 // calls F(r,col,type=1)
	if(!(found<=0)) return found; 
	}
return 0;
}
// -----------------------------------------------------------------------------------------
// Creates popup right click menu to manipulate the row
Grids.OnGetMenu = function(G,row,col,M){
if(row.Fixed||M) return null;
var I = [], M = {Items:I}, ident = row.Def.Name=="Node" ? " order":" product";
I[I.length] = {Name:"Del",Text:(row.Deleted?"Undelete":"Delete")+ident};
I[I.length] = {Name:"Sel",Text:(row.Selected?"Deselect":"Select")+ident};
I[I.length] = {Name:"Cpy",Text:"Copy"+ident};
if(row.firstChild) I[I.length] = {Name:"CpyTree",Text:row.Def.Name=="Node"?"Copy order with products":"Copy product with items"};

if(row.Def.Name=="Node") {
   I[I.length] = {Name:"AddOrder",Text:"Add new order"};
   I[I.length] = {Name:"InsItem",Text:"Add new product"};
   }
else I[I.length] = {Name:"AddItem",Text:"Add new product"};
if(row.firstChild) I[I.length] = {Name:"Exp",Text:(row.Expanded?"Collapse":"Expand") + (row.Def.Name=="Node"?" order":" product")};
if(row.Def.Name=="Node") I[I.length] = {Name:"Check",Text:Get(row,'X')?"Uncheck Used":"Check Used"};
return M;
}
// -----------------------------------------------------------------------------------------
// Called after selecting item in the popup right click menu
Grids.OnContextMenu = function(G,row,col,N){
switch(N){
   case "Del" : G.DeleteRow(row); break;
   case "Sel" : G.SelectRow(row); break;
   case "Cpy" : G.CopyRow(row,null,row); break;
   case "CpyTree" : G.CopyRows([row],null,row,1); break;
   case "AddItem" : G.ActionAddRow(); break;
   case "InsItem" : G.ActionAddChildEnd(); break;
   case "AddOrder" : G.ActionAddRow(); break;
   case "Exp" : if(row.Expanded) G.Collapse(row); else G.Expand(row); break;
   case "Check" : G.SetValue(row,"X",!Get(row,'X'),1); break;
   }
}
// -----------------------------------------------------------------------------------------
// Called when NoVScroll / NoHScroll is set automatically due small window size, disables the checkbox for manual change of NoVScroll / NoHScroll
Grids.OnLimitScroll = function(G,clr,noh,nov){ 
G.SetAttribute(G.Rows.Group,"Win","CanEdit",clr,1); 
var tip = clr?"Disable grid scrollbars and use page scrollbars":"Used page scrollbars because browser window is too small to show this example with its own scrollbars";
G.SetAttribute(G.Rows.Group,"Win","Tip",tip,1); 
G.SetAttribute(G.Rows.Group,"WinLabelRight","Tip",tip,1); 
}
// -----------------------------------------------------------------------------------------
// Called after changed language to reset currency and recalculate grid
Grids.OnLanguageFinish = function(G,code){ 
var row = G.Rows.Fix3;
G.SetValue(row,"C",Get(row,Get(row,"D")+"Rate"),1);
}
// ------------------------------------------------------------------------------------------------------------
// Called on importing xlsx, to remove the HtmlPostfix from order name, to not show it twice
Grids.OnImportCell = function(G,imrow,imcol,row,col){ 
if(col=="O"&&row[col]&&typeof(row[col])=="string") row[col] = row[col].replace(/\s\d{5,5}/g,"");
}
// -----------------------------------------------------------------------------------------

      </script>

      <!-- Google Analytics code run once for trial -->
      <script>
         var TGTrial = document.cookie.match(/TGTrialGrid\s*=\s*(\d+)/), TGIndex = 128;
         if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
            var n = "RunTrialHtmlFirstRtl", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialGrid="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
            var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
            var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
                 +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
            var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
            },100);
      </script>
   </body>
</html>
